Skip to main content

Reporte sobre Lip Sync con Three.js Fiber

Introducción​

Este documento presenta una investigación sobre la implementación de lip sync en aplicaciones desarrolladas con Three.js y React Three Fiber. Se abordan herramientas como ElevenLabs, Rhubarb Lip Sync y Lyisinc, así como las ventajas de utilizar Three.js Fiber para mejorar el rendimiento y la calidad de las animaciones.

Ventajas de Three.js Fiber​

Three.js Fiber ofrece una manera eficiente de desarrollar aplicaciones en 3D dentro del ecosistema de React. Sus principales ventajas incluyen:

  • Rendimiento optimizado: Gracias al uso de reconciliación con React, permite manejar escenas complejas sin afectar el rendimiento.
  • Simplicidad: Proporciona una API declarativa más intuitiva para manejar gráficos en 3D.
  • Soporte para animaciones y estilos: Facilita la integración de animaciones, estilos y modelos importados.

Generación de modelos y animaciones​

Los modelos 3D utilizados en Three.js Fiber pueden ser generados con la herramienta gltfjsx. Un ejemplo de generación de modelo sería:

npx gltfjsx public/models/abraham.glb -o src/components/Abraham.jsx -r public

Este comando genera un componente React con el modelo 3D listo para ser utilizado en una escena.

Código de animación en Three.js Fiber​

A continuación, un ejemplo de código en React con Three.js Fiber para animar un modelo:

import React, { useEffect, useRef, useState } from "react";
import { useGraph } from "@react-three/fiber";
import { useAnimations, useFBX, useGLTF } from "@react-three/drei";
import { SkeletonUtils } from "three-stdlib";

export function Abraham(props) {
  const { scene } = useGLTF("/models/abraham.glb");
  const clone = React.useMemo(() => SkeletonUtils.clone(scene), [scene]);
  const { nodes, materials } = useGraph(clone);

  const { animations: happyAnimation } = useFBX("/models/happy.fbx");
  const { animations: idleAnimation } = useFBX("/models/idle.fbx");

  idleAnimation[0].name = "Idle";
  happyAnimation[0].name = "happy";

  const [animation, setAnimation] = useState("happy");
  const group = useRef();
  const { actions } = useAnimations([
    idleAnimation[0], happyAnimation[0]
  ], group);

  useEffect(() => {
    actions[animation].reset().fadeIn(0.5).play();
    return () => actions[animation].fadeOut(0.5).play();
  });

  return (
    <group {...props} dispose={null} ref={group}>
      <primitive object={nodes.Hips} />
    </group>
  );
}
useGLTF.preload("/models/abraham.glb");

ElevenLabs

Introducción​

ElevenLabs es una herramienta de síntesis de voz basada en inteligencia artificial que permite convertir texto en audio y viceversa. Su tecnología avanzada interpreta el contexto del texto para generar una entonación natural en la voz.

Funcionalidades principales​

  • Síntesis de voz: Transforma texto en audio con diferentes configuraciones de voz.
  • Selección de voz: Permite elegir entre distintos acentos, tonos y estilos.
  • Conversión de audio a texto: Utiliza inteligencia artificial para transcribir audios.
  • API disponible: Permite integrar la herramienta en aplicaciones externas.
  • Personalización avanzada: Ajustes de estabilidad, similitud y estilo de voz.

Configuraciones avanzadas​

Stability (Estabilidad)​

  • Determina la consistencia en la generación de la voz.
  • Un valor bajo introduce mayor variabilidad emocional.
  • Un valor alto hace la voz más monótona y consistente.
  • Recomendación: Estabilidad en 50 para un balance entre emoción y claridad.

Similarity (Similitud)​

  • Dicta qué tan fiel debe ser la voz generada respecto a la original.
  • Un valor alto puede replicar ruidos o artefactos de un audio de baja calidad.

Style Exaggeration (Exageración de estilo)​

  • Amplifica el estilo del hablante original.
  • Aumenta la carga computacional y puede reducir la estabilidad.
  • Recomendación: Mantener en 0 para evitar fluctuaciones indeseadas.

Speaker Boost​

  • Aumenta la similitud con el hablante original.
  • Incrementa la carga computacional y puede generar latencia.

Uso de la API​

ElevenLabs permite insertar pausas en el audio generado utilizando la siguiente sintaxis:

<break time="1.5s"/>

Este comando introduce una pausa de 1.5 segundos para hacer que el audio sea más natural.

Planes y Precios​

Plan Starter - $5/mes​

  • 30,000 créditos (~30 min de audio)
  • Clonación de voz con solo 1 minuto de audio
  • Acceso al editor de doblaje
  • Licencia para uso comercial

Plan Creator - $22/mes​

  • Todo lo del plan Starter
  • Clonación de voz profesional para una réplica más realista
  • Studio para contenido de larga duración con múltiples hablantes
  • Audio Native para narraciones en sitios web y blogs
  • Calidad de audio mejorada en API (192 kbps)

Conclusión​

ElevenLabs es una solución avanzada para la síntesis de voz, ofreciendo una amplia gama de configuraciones que permiten personalizar la experiencia de generación de audio. Su API flexible y opciones de ajuste hacen que sea ideal para aplicaciones interactivas, narraciones y doblajes automatizados.

Resumen sobre Rhubarb Lip Sync

Introducción​

Rhubarb Lip Sync es una herramienta que permite generar animaciones 2D de sincronización labial a partir de grabaciones de voz. Analiza archivos de audio, reconoce el contenido hablado y genera automáticamente la información necesaria para la animación de los labios. Se usa comúnmente en videojuegos, animaciones y otros proyectos interactivos.

Más información: Repositorio en GitHub

Formatos de entrada​

Rhubarb Lip Sync admite los siguientes formatos de audio:

  • WAVE (.wav)
  • Ogg Vorbis (.ogg)

El archivo de audio debe ser el último argumento en la línea de comandos al ejecutar el programa.

Explicación del Archivo JSON de Salida​

El archivo JSON generado por Rhubarb Lip Sync contiene información sobre el análisis del audio y las posiciones de la boca requeridas para la animación.

El script necesario para generar un archivo json es el siguiente​

 ./Rhubarb-Lip-Sync-1.13.0-macOS/rhubarb -f json ./public/audios/context.wav  -o ./public/audios/context.json

Por el momento, se debe de instalar localmente la ultima versión del repositorio de la libreria y correr el script rhubarb para porder utilizar el script anterior.

Estructura del JSON​

{
  "metadata": {
    "soundFile": "/Users/Kev/aprendizaje/react/r3f-vite-starter/./public/audios/introduction.wav",
    "duration": 5.01
  },
  "mouthCues": [
    { "start": 0.00, "end": 0.13, "value": "X" },
    { "start": 0.13, "end": 0.19, "value": "C" },
    { "start": 0.19, "end": 0.32, "value": "E" }
  ]
}

Explicación de los campos​

metadata​

  • soundFile: Ruta del archivo de audio analizado.
  • duration: Duración total del audio en segundos.

mouthCues​

Lista de objetos que representan los movimientos de la boca en función del tiempo.

Cada objeto tiene los siguientes campos:

  • start: Tiempo en segundos donde comienza el fonema.
  • end: Tiempo en segundos donde termina el fonema.
  • value: Representación de la forma de la boca asociada al fonema.

Significado del campo value​

El campo value define las posiciones de la boca necesarias para representar los sonidos del habla. Estos valores corresponden a los fonemas detectados y pueden ser utilizados para animar un modelo 3D o 2D de forma realista.

Valores comunes y sus significados:

  • A: Boca abierta (ejemplo: "ah")
  • B: Boca cerrada (ejemplo: "m", "b", "p")
  • C: Sonidos dentales (ejemplo: "s", "z")
  • D: Sonidos labiodentales (ejemplo: "f", "v")
  • E: Boca semiabierta (ejemplo: "e")
  • F: Boca estirada (ejemplo: "ee")
  • X: Boca en reposo

Implementación en Código​

El siguiente fragmento de código en Three.js Fiber muestra cómo se utilizan los valores mouthCues para modificar las influencias de los Blend Shapes en un modelo 3D en tiempo real:

useFrame(() => {
  const currentAudioTime = audio.currentTime;

  Object.values(corresponding).forEach((value) => {
    nodes.Wolf3D_Head.morphTargetInfluences[
      nodes.Wolf3D_Head.morphTargetDictionary[value]
    ] = 0;
    nodes.Wolf3D_Teeth.morphTargetInfluences[
      nodes.Wolf3D_Head.morphTargetDictionary[value]
    ] = 0;
  });

  for (let i = 0; i < lipsync.mouthCues.length; i++) {
    const mouthCue = lipsync.mouthCues[i];
    if (
      currentAudioTime >= mouthCue.start &&
      currentAudioTime <= mouthCue.end
    ) {
      nodes.Wolf3D_Head.morphTargetInfluences[
        nodes.Wolf3D_Head.morphTargetDictionary[corresponding[mouthCue.value]]
      ] = 1;
      nodes.Wolf3D_Teeth.morphTargetInfluences[
        nodes.Wolf3D_Head.morphTargetDictionary[corresponding[mouthCue.value]]
      ] = 0;
    }
  }
});

Conclusión​

Rhubarb Lip Sync es una herramienta efectiva para la generación automática de sincronización labial en proyectos de animación. Su salida en formato JSON permite integrar fácilmente los datos en motores de animación como Three.js Fiber, facilitando la implementación de lip sync en personajes 3D y 2D.